<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>微博</title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="jyArea">
     <div class="takeComment">
        <textarea name="textarea" class="takeTextField" id="tijiaoText"></textarea>
        <div class="takeSbmComment">
            <input type="button" class="inputs" value="" />
        </div>
    </div>


    <div class="commentOn">
       
    </div>
</div>
</body>
<script>
	const btn = document.querySelector(".inputs");
	const contextArea = document.querySelector("#tijiaoText");
	const commentOn = document.querySelector(".commentOn");
	btn.onclick = function(){
		const context = contextArea.value.trim();
		const xhr = new XMLHttpRequest;
		xhr.responseType = "json";
		xhr.open("post","/addWeibo");
		xhr.setRequestHeader("Content-Type","application/json");
		xhr.send(JSON.stringify({
			context
		}));
		xhr.onload = function(){
			const {ok,msg} = xhr.response;
			if(ok === 1){
				contextArea.value = null;
				getWeibo();
			}else{
				alert(msg);
			}
		}
	}
	getWeibo();
	function delWeibo(id){
		const xhr = new XMLHttpRequest();
		xhr.open("get","/delWeibo/"+id);
		xhr.send();
		xhr.onload = function(){
			getWeibo();
		}
	}
	function getWeibo(){
		const xhr = new XMLHttpRequest();
		xhr.responseType = "json";
		xhr.open("get","/getWeibo");
		xhr.send();
		xhr.onload = function(){
			const {contextList} = xhr.response;
			commentOn.innerHTML = (`
				<div class="noContent" style="display:${contextList.length>0?'none':'block'}">暂无留言</div>
		        <div class="messList">
		            ${contextList.map(({context,id,topNum,downNum,addTime})=>(`
			             <div class="reply">
			                <p class="replyContent">${context}</p>
			                <p class="operation">
			                    <span class="replyTime">${addTime}</span>
			                    <span class="handle">
			                        <a href="javascript:;" class="top">${topNum}</a>
			                        <a href="javascript:;" class="down_icon">${downNum}</a>
			                        <a href="javascript:;" onclick="delWeibo('${id}')" class="cut">删除</a>
			                    </span>
			                </p>
			             </div>
		            
		            `)).join("")}
		           
		        </div>
		        <div class="page">
		            <a href="javascript:;" class="active">1</a>
		            <a href="javascript:;">2</a>
		            <a href="javascript:;">3</a>
		        </div>
			`)
		}
	}
</script>
</html>
